@import './mixin.styl'
@import './color.styl'
$black = #000
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff

.theme-app
  .van-action-sheet
    max-height 90vh
  .ad
    &.ad-right,
    &.ad-middle
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
  .notice-bar
    .notice-text
      font-size: 12px
      color: $white
      line-height: 20px
  // logo
  .profile
    font-size: 11px
    .logo
      maxWH(100px, 80px)
      margin: 5px 0
      overflow: hidden
      img
        maxWH(100px, 80px)
  .foot-menu
    &.active
      bottom: 36px

  .scene-list
    .scene-list-item
      bd-1px(transparent, 0)
  .scene-group
    .scene-group-item
      bd-1px(transparent, 0)

  // 侧栏挂件
  .pendant
    bottom: 190px
    .pendant-icon
      wh(34px, 34px)
      i
        font-size: 30px
    .audio-icon
      i
        font-size: 34px
  // 开场提示
  .start-remind-frame
    .wrap
      display: flex
      justify-content: center
      align-items: center
      height: 100%
      & > img
        max-width: 100%
      & > video
        width: 100%
        height: auto

  .loading-wrap
    img
      max-width: 100%
      max-height: 100%
  // weather
  .weather
    position: static
    width: 150px
    .future
      margin-top: 0
    .now
      .weather-temp
         margin-top: 15px
        strong
          font-size: 36px
      .weather-info
        p
          font-size: 12px
        img
          width: 36px
          height: 36px

  // danmu
  .barrage-container
    width: 100%
    .barrage-input
      bottom: 0
      left: 0
      right: 0
      display: flex
      .barrage-icon
        flex: 0 0 40px
      .input-wrap
        flex: 1
        position: relative
        input
          position: absolute
          left: 0
          right: 0
          top: 2px
          bottom: 2px
          width: 100%
          box-sizing: border-box
          height: 32px
          line-height: 32px
          border-radius: 0
      .btn-wrap
        .barrage-btn
          display: inline-block
          width: 40px
          padding: 0 10px

  .swiper-frame
    .wrap
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 100%
      .app-swiper
        width: 100%
        .van-swipe-item
          display: flex
          height: 100%
          justify-content: center
          align-items: center

          img
            align-self: center
            max-width: 100%

  .three-wrap
    position: absolute
    left: 0
    transform: rotate(90deg)
    background-color: rgba($black, .5)
    frame
      width: 100%
      height: 100%
    .ctrl-bar
      top: auto
      right: 10px
      top: -130px

  .image-frame
    display: flex
    justify-content: center
    align-items: center

  .reward-frame
    .content
      position: absolute
      height: auto
      width: 90%
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      padding: 170px 12px 80px 12px
      border-radius: 6px
      box-sizing: border-box

  .order-center
    background-color: $white
    .order-top
      background-color: #f0f0f0
    .order-list
      position: fixed
      top: 220px
      bottom: 0
      left: 0
      right: 0
      background: #fff
      .row
        .item-body
          display: flex
          width: 100%
          color: $black-dark
          & > .img-box
            flex: 0 0 80px
          & > .info
            flex: 1
            line-height: 18px
            padding: 0 10px
            .title
              font-size: 15px
            p
              line-height: 20px
          & > .number
            flex: 0 0 40px
.theme-app-c
  .foot-menu
    z-index: 95
.theme-app-d
  .pendant
    bottom: 230px
.theme-app-e
  width 100vw
  height 100vh
  position relative
  overflow hidden
  .weather
    .now
      .weather-temp
         margin-top: 0
  .barrage-item
    padding-left: 40px
    padding-right: 10px
    background-color: rgba(#9bd6ed, .3)
    border-radius: 25px
    .avatar
      width 22px
      height 22px
      left: 10px


.ipad-mod
  .swiper-frame
    .wrap
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      max-height: 60%
      .app-swiper
        height: 100%
  .toolsbar
    .tip-box
      top: 190px
    $width = 46px
    icon-width()
      width: $width
      height: $width
      line-height: $width
    .drop-group
      icon-width()
      .drop-wrap
        width: $width
        height: 0
        padding-top: $width
      .drop-item
        margin: 5px
        margin: 0

  .signin .signin-top
    padding-top: 40%


  .theme-app-a, .theme-app-b, .theme-app-c, .theme-app-d, .theme-app-copya
    .minimap
      left: -184px
  .theme-app-a, .theme-app-b, .theme-app-d, .theme-app-copya
    $width = 36px
    icon-width()
      width: $width
      height: $width
      line-height: $width
    .foot-menu
      .foot-menu-list
        .menu-item
          max-width: 50px
          .menu-text
            font-size: 12px
            margin-top: 5px
          .menu-icon
            background-color: $white
            display: inline-block
            border-radius: 50%
            transition: all 1s
            icon-width()
            .iconfont
              vertical-align: middle
              color: $theme-classic-color
              font-size: 14px
